<script>
  import ColourfulText from "./ColourfulText.svelte";
</script>
<div
  class="h-screen w-full flex items-center justify-center relative overflow-hidden bg-black"
>
  <img
    alt="img"
    src="https://assets.aceternity.com/linear-demo.webp"
    class="h-full w-full object-cover absolute inset-0 [mask-image:radial-gradient(circle,transparent,black_80%)] pointer-events-none opacity-70"
  />
  <h1
    class="text-2xl md:text-5xl lg:text-7xl font-bold text-center text-white relative z-2 font-sans"
  >
    The only <ColourfulText text="autonomous" /> <br /> project management tool
  </h1>
</div>